<template>
	<div class="index">
		<div class="w1">
			
			<div class="til">
				<div class="title1">
					<h3>发布标题</h3>
					<div class="title2">
						<img src="../assets/img/草稿箱.png" style="width:25px;height:25px" alt="">
						<span>草稿箱</span>
					</div>
				</div>
			</div>
			<div class="til2">
				<div class="in1">
					<div class="jk1">
						<span>标题：</span>
						<div class="put1">
							<el-input class="input" type="text" placeholder="标题(必填)" v-model="titleValue" maxlength="30" show-word-limit></el-input>
						</div>
					</div>
					<div class="jk2">
						<span>内容：</span>
						<div class="put2">
							<div id="div1"></div>
						</div>
					</div>
					<div class="jk3">
						<span>发布板块：</span>
						<div class="put3" v-for="it in plate" :key="it">
							<input @click="plateHndle(it)" type="radio" name="value" :value=it>{{it}}
							<!-- <input type="radio" name="value" value="2">攻略
							<input type="radio" name="value" value="3">硬核 -->
						</div>
					</div>
					<div class="jk4">
						<span>选择话题：</span>
						<div class="put4">
							<!-- <block></block> -->
							<span class="ti1" v-show="dynamicTags == ''">选择相关角色、内容分类、获得更过浏览</span>
							<span class="ti1" v-show="dynamicTags != ''">
								<el-tag :key="tag" v-for="tag in dynamicTags" closable type='info' size="medium" :disable-transitions="false" @close="handleClose(tag)">
									{{tag}}
								</el-tag>
							</span>
							<div class="put4_1">
								<input type="text" placeholder="搜索话题">
							</div>
							<div class="jk4_1" v-show="plateValue === '酒馆'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in pub" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div>
							<div class="jk4_1" v-show="plateValue === '攻略'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in Strategy" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div>
							<div class="jk4_1" v-show="plateValue === '硬核'">
								<span class="ti2">推荐话题</span>
									<div class="tilt1">
										<div class="tilt" @click="labelHndle(item)" v-for="item in Hard" :key="item">
											<span>{{item}}</span>
										</div>
									</div>
							</div>
						</div>
					</div>
					<div class="jk5">
						<span class="ti1">加入合集：</span>
						<div class="put5">
							<el-select v-model="formInline.region" placeholder="选择是否合集">
								<el-option label="不选择合集" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
								<!-- <div> -->
									<el-button size="mini" type="text" @click="centerDialogVisible = true" style="display:flex;align-items: center;cursor:pointer;">
										<div style="display:flex;align-items: center;">
											<img src="../assets/img/加号.png" style="width:20px;height:20px;margin-left:18px;" alt="">
											<span class="ti2" style="color:#ccc;font-size:10px;">创建合集</span>
										</div>
									</el-button>
								<!-- </div> -->
							</el-select>
						</div>
					</div>
					<div class="jk6">
						<span class="ti1">我的创作：</span>
						<div class="put6">
							<el-switch
							v-model="creation"
							active-color="#13ce66"
							inactive-color="#ccc"/>
							<span>启用即表示本内容为您独立创作，严禁转载抄袭</span>
						</div>
					</div>

					<span v-show="creation === true">
						<div class="jk7">
							<span class="ti1">预投稿：</span>
							<div class="put7">
								<el-switch
								v-model="submission"
								active-color="#13ce66"
								inactive-color="#ccc"/>
								<span class="ti2">预投稿通过3篇后可免门槛申请创作者│查看<span class="ti3">《预投稿要求》</span></span>
							</div>
						</div>
						<div class="jk8">
							<span class="ti1">转载权限：</span>
							<div class="put8">
								<el-button @click="jurisdictionHndle" :type="jurisdiction ? '' : Switch">允许规范转载</el-button>
								<el-button @click="jurisdictionHndle" :type="jurisdiction ? Switch : ''">禁止转载或摘编</el-button>
								<span class="nli" v-show="jurisdiction === false">不得对作品内容进行复制和转载</span>
								<span class="nli" v-show="jurisdiction === true">可对作品内容进行复制和转载，但需注明作品作者、出处</span>
							</div>
						</div>
						<div class="jk9">
							<el-checkbox v-model="checked" />
							<span class="ti1">
								我已阅读并接受<span class="ti2">《米游社内容上传协议》</span>
							</span>
						</div>
					</span>

					<div class="button">
						<el-button type="primary" round>发布</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 创建合集 对话框 -->
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
			<span>添加啦</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
import E from 'wangeditor'
export default {
	data() {
		return {
			formInline: {
				user: '',
				region: '不选择合集'
        	},
			titleValue: '',
			// titleValueLength: 0,
			plateValue: '',
			labelValue: '',
			dynamicTags: [],
			plate: ['酒馆','攻略','硬核'],
			pub: ['每日一水','祈愿分享','游戏战绩','好友招募','冒险家·集结','问题反馈与建议','探索解谜','萌新提问'],
			Strategy: ['萌新指南','角色攻略','探索解谜','讨伐手册','其他攻略'],
			Hard: ['游戏心得','角色攻略','考据','深境螺旋','彩蛋集锦'],
			creation: false,
			submission: false,
			jurisdiction: false,
			centerDialogVisible: false,
			checked: false,
			Switch: 'primary',
			this: ''
		}
	},
	watch: {
		// titleValue() {
		// 	if(this.titleValue.length <= 30) {
		// 		this.titleValueLength = this.titleValue.length
		// 	}else {
				
		// 	}
		// }
	},
	mounted(){
        this.init()
    },
    methods:{
        init(){
            const editor = new E('#div1')
             // 或者 const editor = new E( document.getElementById('div1') )
            editor.create()       
        },
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},
		plateHndle(e) {
			this.plateValue = e
		},
		labelHndle(e) {
			if(this.dynamicTags.length >= 5) {
				this.$message({
    				message: '最多选五个哦',
					type: 'warning'
				})
			}else {
				let y = this.dynamicTags.indexOf(e)
				if(y === -1) {
					this.dynamicTags.push(e)
				}else {
					this.dynamicTags.splice(y, 1)
				}
			}
		},
		jurisdictionHndle() {
			this.jurisdiction = !this.jurisdiction
		}
    }
}
</script>

<style lang="less" scoped>
		.el-dialog {
			border: 1px solid red;
			z-index: 1000;
		}
	.index {
		// border: 1px solid red;
		position: relative;
		display: flex;
		justify-content: center;
		background-color: rgb(241, 240, 240);
		.w1 {
			border: 1px solid red;
			// padding-bottom: 600px;
			background-color: white;
			width: 50%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 20px;
			.til {
				width: 100%;
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: center;
				.title1 {
					width: 95%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title2 {
						height: 100%;
						display: flex;
						align-items: center;
						span:hover {
							color: #02a9fc;
							cursor:pointer;
						}
					}
				}
			}
			.til2 {
				width: 80%;
				.in1 {
					padding: 10px;
					.jk1 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						span {
							width: 130px;
							// border: 1px solid red;
						}
						.put1 {
							// border: 1px solid #ccc;
							width: 96%;
							height: 35px;
							display: flex;
							justify-content: space-between;
							.input {
								// width: 80%;
								// height: 90%;
								border-style:none;
								background:none;
							}
							// span {
							// 	width: 60px;
							// 	display: flex;
							// 	align-items: center;
							// 	justify-content: flex-end;
							// 	color: #ccc;
							// }
						}
					}
					.jk2 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						span {
							width: 130px;
							height: 350px;
						}
						.put2 {
							width: 96%;
							margin-top: 30px;
							// border: 1px solid red;
						}
					}
					.jk3 {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						margin-top: 30px;
						span {
							width: 112px;
						}
						.put3 {
							// padding-left: 6px;
							width: 100px;
							// border: 1px solid red;
							input:hover {
								cursor: pointer;
							}
						}
					}
					.jk4 {
						display: flex;
						flex-wrap: nowrap;
						margin-top: 30px;
						span {
							width: 112px;
						}
						.put4 {
							.ti1 {
								width: 100%;
								color: #ccc;
								display: flex;
								flex-wrap: wrap;
								.el-tag {
									display: flex;
									align-items: center;
									justify-content: space-between;
									margin-left: 10px;
								}
							}
							.put4_1 {
								border: 1px solid #ccc;
								margin-top: 10px;
								input {
									padding: 8px;
									width: 94%;
									border-style: none;
									background: none;
								}
							}
							.jk4_1 {
								width: 100%;
								.ti2 {
									font-size: 15px;
								}
								.tilt1 {
									width: 600px;
									padding: 3px;
									display: flex;
									flex-wrap: wrap;
									.tilt{
										border: 1px solid #ccc;
										border-radius: 20px;
										margin: 6px;
										cursor: pointer;
										span {
											display: flex;
											width: 110px;
											font-size: 15px;
											justify-content: center;
											align-items: center;
											padding: 5px;
										}
									}
								}
							}
						}
					}
					.jk5 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
					}
					.jk6 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put6 {
							span {
								margin-left: 16px;
								color: #ccc;
							}
						}
					}
					.jk7 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put7 {
							.ti2 {
								margin-left: 16px;
								color: #ccc;
								.ti3 {
									cursor: pointer;
									color: #02a9fc;
								}
							}
						}
					}
					.jk8 {
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						margin-top: 30px;
						.ti1 {
							width: 112px;
						}
						.put8 {
							.nli {
								display: flex;
								flex-wrap: wrap;
								color: #ccc;
								font-size: 15px;
							}
						}
					}
					.jk9 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30px;
						.ti1 {
							margin-left: 6px;
							.ti2 {
								cursor: pointer;
								color: #02a9fc;
							}
						}
					}
					.button {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 30px;
					}
				}
			}
		}
	}
</style>